<template>
    <ul class="view-sub-body" :style="`--menu-indent:${level * indent}px`">
        <template v-for="menu of menus">
            <li class="view-sub-list" :class="{'view-sub-list-two':isChildren(menu)}">
                <div class="view-sub-row" :class="{'view-sub-row-active':checked.includes(menu[field]) }"
                     @click.stop="handleRowClick(menu,isChildren(menu))"
                >
                    <span class="view-sub-icon">
<!--                        <rx-icon-show :icon="getIcon(menu.icon)"/>-->
                    </span>
                    <span class="view-sub-text" :class="{'view-sub-text-weight':isChildren(menu)}" :title="getName(menu.title)">
                        {{getName(menu.title)}}
                    </span>
                </div>
                <template v-if="isChildren(menu)">
                    <view-sub-menu
                        :menus="menu.children"
                        @change="(obj)=>$emit('change',obj)"
                        v-model="subChecked"
                        :level="level + 1"
                        :indent="indent"
                        :field="field"
                        :is-parent-click="isParentClick"
                        :is-cancel-checked="isCancelChecked"
                    ></view-sub-menu>
                </template>
            </li>
        </template>
    </ul>
</template>

<script>
/**
 * @Author : yangsanjin
 * @Date: 2024-12-24 14:38
 */

export default {
    name: "view-sub-menu",
    components:{

    },
    model:{
        prop:'checked',
        event:'update:checked'
    },
    //emits:['change','update:checked'],
    props:{
        /* 选中的菜单 */
        checked:{
            type:Array
        },
        /* 菜单数据  */
        menus:{
            type:Array,
            default:()=>[]
        },
        /* 所在层级 */
        level:{
            type:Number,
            default:0
        },
        /* 节点缩进 */
        indent:{
            default:19
        },
        /* 唯一字段，对应选中数据 */
        field:{
            default:'key'
        },
        /* 父节点能否被点击 */
        isParentClick:{
            default:false
        },
        /* 再次点击已经选中的行是否可以取消选中 */
        isCancelChecked:{
            default:false
        }
    },
    computed:{
        isChildren(){
            return (menu)=>{
                if(menu.showType && ["FUNS","FUNS_BLOCK","FUN"].includes(menu.showType)){
                    return false
                }
                return menu.children && Array.isArray(menu.children) && menu.children.length
            }
        },
        subChecked:{
            get(){
                return this.checked;
            },
            set(v){
                this.$emit('update:checked',v)
            }
        }
    },
    methods:{
        /**
         * 菜单行选中
         */
        handleRowClick(menu,hasChildren){
            let { isParentClick } = this ;
            if(hasChildren && !isParentClick){
                return ;
            }
            let {menus,level,field,isCancelChecked,checked} = this ;
            if(isCancelChecked && checked.includes(menu[field])){
                this.$emit('update:checked',[])
            }else {
                this.$emit('update:checked',[menu[field]])
            }
            this.$emit('change',{menu,broMenu:menus,level})
        },
        getName(names){
            let language = window.localStorage.getItem('language') || 'zh-CN';
            if(typeof names === "string" && names.includes(language)){
                try {
                    return new Function(`return ${names}`)()[language]
                }catch (e) {
                    return names
                }
            }else if(Object.prototype.toString.call(names) === '[object Object]'){
                return names[language]
            }
            return names
        },
        getIcon(icon){
            try {
                let icons = new Function(`return ${icon}`)()
                return icons.icon
            }catch (e) {
                return icon
            }
        },
    }
}
</script>

<style>

</style>
<style scoped>
.view-sub-body{
    display: grid;
    grid-template-columns: 180px 180px;
    gap: 4px;
}
.view-sub-list{
    padding-left: var(--menu-indent);
}
.view-sub-list.view-sub-list-two{
    grid-column-start: 1;
    grid-column-end: 3;
}
.view-sub-row{
    display: flex;
    align-items: center;
    gap: 0 4px;
    padding: 0 6px;
    border-radius: 4px;
    cursor: pointer;
}
.view-sub-list:not(.view-sub-list-two) .view-sub-row:hover{
    background-color: var(--header-menu-hover-color);
}
.view-sub-text{
    flex: 1;
    line-height: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.view-sub-text.view-sub-text-weight{
    font-weight: bold;
}
.view-sub-list .view-sub-row-active{
    background-color: rgba(26, 94, 255, 0.08);
    color: #1A5EFF;
}
</style>
